<template>
  <div class="case-bottom">
                <div class="case-left">
                    <ul class="left-ul">
                        <li class="left-li left-oli"><div class="xiaodian xiaobu"></div><a href="#renin">人气Top</a></li>
                        <li class="left-li"><div class="xiaodian"></div><a href="#qixi">七夕限定</a>
                        <span class="left-sp1">LOVE</span>
                        </li>
                        <li class="left-li"><div class="xiaodian"></div><a href="#shengye">生椰家族</a></li>
                        <li class="left-li"><div class="xiaodian"></div>夏日冰咖</li>
                        <li class="left-li"><div class="xiaodian"></div>瑞纳冰</li>
                        <li class="left-li"><div class="xiaodian"></div>厚乳拿铁</li>
                        <li class="left-li"><div class="xiaodian"></div>SOE精品</li>
                        <li class="left-li"><div class="xiaodian"></div>经典拿铁</li>
                        <li class="left-li"><div class="xiaodian"></div>大师咖啡</li>
                        <li class="left-li"><div class="xiaodian"></div>杨枝甘露</li>
                        <li class="left-li"><div class="xiaodian"></div>葡萄上新</li>
                        <li class="left-li"><div class="xiaodian"></div>甜品小点</li>
                        <li class="left-li"><div class="xiaodian"></div>烘焙轻食</li>
                        <li class="left-li"><div class="xiaodian"></div>经典饮品</li>
                        <li class="left-li"><div class="xiaodian"></div>七夕潮品</li>
                    </ul>
                </div>
                <div class="case-right">
                    <div class="modds">
                        <div class="modds-top" id="renin">
                            人气Top
                            <span class="modds-clause">瑞幸必喝爆款，无限回购</span>
                            <span class="modds-wire"></span>
                        </div>
                        <div class="modds-shopp" v-for="caidan in  $store.state.sum" :key = "caidan.id" @click="xaing(caidan.id)">
                            <div class="shopp-img">
                                <img :src="caidan.goodsImg">
                            </div>
                            <div class="shopp-right">
                                <p class="latte">{{caidan.goodsName}}</p>
                                <p class="first">首杯价</p>
                                <p class="manner">
                                    <span class="sp1">￥<span class="sp2">{{caidan.goodsLowPrice}}</span></span> 
                                    <del class="de1">￥<del class="de2">{{caidan.goodsHighPrice}}</del></del>
                                </p>
                                <span class="iconfont icon-jia"></span>
                            </div>
                        </div>
                    </div>
                    <div class="modds">
                        <div class="modds-top" id="qixi">
                            七夕限定
                            <span class="modds-clause">七夕限定</span>
                            <span class="modds-wire"></span>
                        </div>
                        <div class="modds-shopp" v-for="qixi in qixis" :key = "qixi.id" @click="qixi(qixi.id)">
                            <div class="shopp-img">
                                <img :src="qixi.goodsImg">
                            </div>
                            <div class="shopp-right">
                                <p class="latte">{{qixi.goodsName}}</p>
                                <p class="first">首杯价</p>
                                <p class="manner">
                                    <span class="sp1">￥<span class="sp2">{{qixi.goodsLowPrice}}</span></span> 
                                    <del class="de1">￥<del class="de2">{{qixi.goodsHighPrice}}</del></del>
                                </p>
                                <span class="iconfont icon-jia"></span>
                            </div>
                        </div>
                    </div>
                    <div class="modds">
                        <div class="modds-top" id="shengye">
                            生椰家族
                            <span class="modds-clause">生椰系列，人气上新</span>
                            <span class="modds-wire"></span>
                        </div>
                        <div class="modds-shopp" v-for="shenye in shenyes" :key = "shenye.id" @click="sheng(shenye.id)">
                            <div class="shopp-img">
                                <img :src="shenye.goodsImg">
                            </div>
                            <div class="shopp-right">
                                <p class="latte">{{shenye.goodsName}}</p>
                                <p class="first">首杯价</p>
                                <p class="manner">
                                    <span class="sp1">￥<span class="sp2">{{shenye.goodsLowPrice}}</span></span> 
                                    <del class="de1">￥<del class="de2">{{shenye.goodsHighPrice}}</del></del>
                                </p>
                                <span class="iconfont icon-jia"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</template>

<script>
import axios from '../utils/request';
// import $ from 'jquery'

export default {
    name:'Xeuxiang',
    data(){
        return {
            qixis:[],
            shenyes:[]
        }
    },
    methods:{
        xaing(xiaoid){
            this.$router.push("/Details/"+xiaoid)
        },
        qixi(xiaoid){
            this.$router.push("/Details/"+xiaoid)
        },
        sheng(xiaoid){
            this.$router.push("/Details/"+xiaoid)
        }
    },
    created(){
        // axios({
        //     url:"/api/goods/findGoodsByHot"
        // })
        // .then(res=>{
        //     console.log(res.data.data);
        //     this.caidans = res.data.data
        // }),
        this.$store.dispatch('changeCai')
        axios({
            url:"/api/goods/findGoodsByType",
            params:{
                typeId:2
            }
        })
        .then(res=>{
            console.log(res.data.data);
            this.qixis = res.data.data
        }),
        axios({
            url:"/api/goods/findGoodsByType",
            params:{
                typeId:3
            }
        })
        .then(res=>{
            console.log(res.data.data);
            this.shenyes = res.data.data
        })
    },
    mounted(){
        var oLi = document.querySelectorAll('.left-li');
        var oXiao = document.querySelectorAll('.xiaodian');
        for (var i = 0; i < oLi.length; i++) {
            oLi[i].index = i;
            oLi[i].onclick = function(){
                for (var j = 0; j < oLi.length; j++) {
                    oLi[j].style.background = '#f7f7f7';
                    oLi[j].style.color = '#585858';
                    oXiao[j].style.display = 'none'   
                }
                this.style.background = '#fff'
                this.style.color = '#000000'
                oXiao[this.index].style.display = 'block'
            }
            
        }
    }
}
</script>

<style scoped>
@import url("../assets/font-footer/iconfont.css");
    .case-bottom{
        width: 100%;
        height: 5.54rem;
        background-color: #fff;
    }
    .case-bottom .case-left{
        width: 0.78rem;
        float: left;
    }
    .case-left .left-ul{
        width: 0.78rem;
        height: 5.5rem;
        overflow-y: scroll;
    }
    .case-left .left-ul::-webkit-scrollbar{display:none;}
    .left-ul .left-li{
        width: 0.78rem;
        height: 0.43rem;
        background-color: #f7f7f7;
        line-height: 0.43rem;
        text-align: center;
        color: #585858;
        position: relative;
        font-size: 0.14rem;
    }
    .left-li .left-sp1{
        position: absolute;
        display: block;
        width: 0.39rem;
        height: 0.14rem;
        background-color: #ff8753;
        border-top-left-radius: 0.03rem;
        border-bottom-right-radius: 0.03rem;
        top: 0;
        right: 0.08rem;
        font-size: 0.09rem;
        color: #fff;
        text-align: center;
        line-height: 0.14rem;
    }
    .left-ul .bgcs{
        background-color: #fff;
    }
    .left-ul .left-li a{
         color: #585858;
    }
    .left-li .xiaodian{
        width: 0.09rem;
        height: 0.18rem;
        background-color: #ebecfa;
        position: absolute;
        top: 0.05rem;
        border-bottom-right-radius: 50%;
        border-top-right-radius: 50%;
        display: none;
    }
    .left-ul .left-oli{
        background-color: #fff;
    }
    .left-oli .xiaobu{
        display: block;
    }
    .case-bottom .case-right{
        width: 2.82rem;
        height: 5.5rem;
        overflow-y: scroll;
    }
    .case-bottom .case-right::-webkit-scrollbar{display:none;}
    .case-right .modds{
        width: 2.82rem;
    }
    .modds .modds-top{
        width: 100%;
        height: 0.4rem;
        line-height: 0.4rem;
        text-indent: 0.10rem;
        font-size: 0.13rem;
        position: relative;
    }
    .modds-top .modds-clause{
        display: block;
        /* height: 0.12rem; */
        font-size: 0.1rem;
        color: #57575a;
        position: absolute;
        bottom: 0.07rem;
        left: 0.1rem;
        line-height: 0;
        text-indent: 0;
    }
    .modds-top .modds-wire{
        display: block;
        width: 1.44rem;
        height: 0.02rem;
        background-color: #f7f7f7;
        position: absolute;
        bottom: 0.04rem;
        right: 0.03rem;
    }
    .modds .modds-shopp{
        width: 2.64rem;
        height: 0.9rem;
        margin: auto;
        padding: 0.05rem 0;
    }
    .modds-shopp .shopp-img{
        width: 0.9rem;
        height: 0.9rem;
        float: left;
    }
    .modds-shopp .shopp-img img{
        width: 100%;
        height: 100%;
    }
    .modds-shopp .shopp-right{
        width: 1.66rem;
        height: 0.67rem;
        float: right;
        position: relative;
        margin-top: 0.14rem;
    }
    .shopp-right .latte{
        font-size: 0.16rem;
    }
    .shopp-right .first{
        width: 0.3rem;
        height: 0.12rem;
        border: 2px solid #ebd8db;
        border-radius: 0.02rem;
        font-size: 0.1rem;
        margin: 0.11rem 0 0 0;
        color: #db4d40;
    }
    .manner .sp1{
        font-size: 0.1rem;
        color: #cd3900;
    }
    .manner .sp2{
        font-size: 0.13rem;
    }
    .manner .de1{
        font-size: 0.1rem;
        color: #918f90;
        text-decoration: line-through;
    }
    .shopp-right .icon-jia{
        font-size: 0.22rem;
        color: blue;
        position: absolute;
        right: 0;
        bottom: 0;
    }
</style>